Skip to content

style: restyle in-app toasts to match shadcn design language - #112

Merged
Ziinc merged 3 commits into
mainfrom
claude/toast-shadcn-styling-8xbfcn
Jul 28, 2026
Merged

style: restyle in-app toasts to match shadcn design language#112
Ziinc merged 3 commits into
mainfrom
claude/toast-shadcn-styling-8xbfcn

Conversation

@Ziinc

@Ziinc Ziinc commented Jul 25, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Collaborator

Replace the solid saturated-color toast backgrounds (bg-destructive,
bg-primary, bg-green-600, bg-orange-600) with the app's shared shadcn
surface treatment: bg-popover, border, shadow-lg, rounded-lg. Each
toast type is now distinguished by a colored lucide icon and subtle
border tint instead of a full-color fill, matching Card/Dialog/Popover.
Add a toast-styles screenshot spec covering all four toast types in
light and dark mode, and update existing screenshot spec expectations
that described the old "green toast" look.

@github-actions

github-actions Bot commented Jul 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

📸 App QA screenshots

Re-ran the 4 flows whose spec this PR adds or modifies — 9 captures. Other specs in the library were not run.

⬇️ Download the screenshots

commits-tab-after-push
  • commits-tab-after-push-01-before-push.png
    • The Commits tab is active and shows a 'Today' section with Workspace commit 2 above Workspace commit 1.
    • A 'Recent on ' section below lists 5 repo commits (Repo commit 1..5) plus the Initial commit, each tagged Immutable.
    • The header shows a blue 'Push to remote' button (workspace not yet pushed).
  • commits-tab-after-push-02-after-push.png
    • The 'Push to remote' button is gone from the header (only 'Merge...' and the overflow menu remain).
    • A toast in the bottom-left corner with a green check icon reads 'Pushed to remote' / 'Changes pushed successfully'.
    • Workspace commit 1 and Workspace commit 2 are still listed, unchanged from the before-push screenshot.
header-sync-indicator-after-commit
  • header-sync-indicator-01-before-commit.png
    • The Review tab is active and the diff pane shows sync-indicator.txt with one added line highlighted green.
    • The header (top bar, showing the feat/sync-indicator branch) has NO sync control at all -- the workspace is level with the remote, so neither a '↑'/'↓' counter nor the circular refresh-arrows icon is drawn; only the green 'Merge...' button and the overflow menu sit at the right edge.
    • A commit message box with placeholder 'Message' and a 'Commit' button are visible in the left file sidebar.
  • header-sync-indicator-02-after-commit.png
    • The header now shows an '↑1' sync indicator with the circular refresh-arrows icon, just left of the green 'Merge...' button -- it appeared without navigating away from this workspace.
    • A 'Commit created' toast with a green check icon is visible in the bottom-left corner.
    • The Review tab's left sidebar no longer has a 'Changes' section; sync-indicator.txt now sits under 'Committed', tagged 'A'.
sync-after-commit
  • sync-after-commit-01-before-sync.png
    • The Commits tab is active and lists 'Commit that must survive sync' as the newest workspace commit.
    • The header shows the feat/sync-after-commit branch and a sync control reading '↑1' (one commit ahead of remote).
    • synced.txt is not shown as an uncommitted current change — it is committed.
  • sync-after-commit-02-after-sync.png
    • 'Commit that must survive sync' is still listed in the Commits tab, in the same position as the before screenshot.
    • A toast in the bottom-left with a green check icon reads 'Synced with remote' / 'Fetched and pushed changes'.
    • The '↑1' ahead indicator is gone from the header — the workspace is now in sync with the remote.
    • No empty '(no description set)' commit appears above the real commit.
  • sync-after-commit-03-review-after-sync.png
    • The Review tab is active and synced.txt appears only under a 'Committed' section.
    • There is no 'Changes' section — synced.txt has not reverted to being an uncommitted current change.
toast-styles
  • toast-styles-01-all-types.png
    • Four stacked toasts are visible in the bottom-left corner of the page.
    • Every toast shares the same neutral card-like surface (light background, subtle border, drop shadow, rounded corners) rather than a solid saturated color fill.
    • The 'Synced with remote' toast shows a green circular check icon on its left.
    • The 'Push failed' toast shows a red/destructive circular alert (exclamation) icon on its left, the same style used for errors elsewhere in the app (e.g. the rename workspace dialog).
    • The 'Uncommitted changes' toast shows a yellow triangle warning icon on its left, matching the yellow warning color used elsewhere in the app (e.g. the merge dialog's uncommitted-changes banner).
    • The 'Terminal Restarting' toast shows a blue/primary-colored info icon on its left.
    • Each toast has a bold title line and a smaller, muted-colored description line below it.
    • Each toast has a small close (X) button on its right edge.
  • toast-styles-02-all-types-dark.png
    • The page background is dark (dark mode is active).
    • Four stacked toasts are visible in the bottom-left corner, using a dark neutral surface consistent with the rest of the dark-mode UI, not a solid saturated color fill.
    • The 'Synced with remote' toast shows a green check icon.
    • The 'Push failed' toast shows a red/destructive circular alert (exclamation) icon.
    • The 'Uncommitted changes' toast shows a yellow triangle warning icon.
    • The 'Terminal Restarting' toast shows a blue/primary info icon.
    • Toast title and description text is legible against the dark background.

Each bullet under a capture is what the spec claims that image should show — open the PNG and check it.

commit 3c6506b · workflow run — this comment is updated in place on each run.

claude added 3 commits July 27, 2026 19:52
@claude
Restyle in-app toasts to match shadcn design language
888d2b4 
Replace the solid saturated-color toast backgrounds (bg-destructive,
bg-primary, bg-green-600, bg-orange-600) with the app's shared shadcn
surface treatment: bg-popover, border, shadow-lg, rounded-lg. Each
toast type is now distinguished by a colored lucide icon and subtle
border tint instead of a full-color fill, matching Card/Dialog/Popover.

Add a toast-styles screenshot spec covering all four toast types in
light and dark mode, and update existing screenshot spec expectations
that described the old "green toast" look.
@claude
Remove per-type colored border from toast
58363fc 
Toasts now use the same neutral border-border as Card/Dialog; type is
communicated solely by the icon color.
@claude
style: use the app's native icon/color conventions for toasts
3c6506b 
Match how the rest of the app signals status: AlertCircle+destructive
for errors (RenameWorkspaceDialog), AlertTriangle+yellow for warnings
(MergeDialog's uncommitted-changes banner) instead of a generic
XCircle/orange pairing, and drop the icon size to w-4 h-4 to match
other inline banner icons.
@Ziinc
Ziinc force-pushed the claude/toast-shadcn-styling-8xbfcn branch from d67213c to 3c6506b Compare July 27, 2026 20:03
@Ziinc Ziinc changed the title Restyle in-app toasts to match shadcn design language style: restyle in-app toasts to match shadcn design language Jul 27, 2026
@Ziinc
Ziinc merged commit fb84588 into main Jul 28, 2026
11 checks passed
@Ziinc
Ziinc deleted the claude/toast-shadcn-styling-8xbfcn branch July 28, 2026 05:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@Ziinc @claude